<template>
  <cChart :option="chartOption"></cChart>
</template>

<script lang="ts" setup>
const local = useLocal()
//列表（父传子：接收）
const aircraftTypeList: any = defineModel('aircraftTypeList', { default: {} })
const uavTypes: any = {
  '1': {
    name: t('components.aircraftType.60zeao6x8h40'),
    color: '#5470c6'
  },
  '2': {
    name: t('components.aircraftType.60zeao6x9wk0'),
    color: '#9a60b4'
  },
  '3': {
    name: t('components.aircraftType.60zeao6xa340'),
    color: '#fc8452'
  },
  '4': {
    name: t('components.aircraftType.60zeao6xa840'),
    color: '#3ba272'
  },
  '5': {
    name: t('components.aircraftType.60zeao6xads0'),
    color: '#73c0de'
  },
  '6': {
    name: t('components.aircraftType.60zeao6xaik0'),
    color: '#ee6666'
  },
  '7': {
    name: t('components.aircraftType.60zeao6xano0'),
    color: '#fac858'
  },
  '8': {
    name: t('components.aircraftType.60zeao6xas40'),
    color: '#91cc75'
  },
  '9': {
    name: t('components.aircraftType.60zeao6xaw80'),
    color: '#ea7ccc'
  },
}

const sum = computed(() => {
  return aircraftTypeList.value.reduce((acc: any, cur: any) => acc + cur.weight, 0);
})
const { chartOption } = useChartOption(() => {
  return {
    title: {
    text: t('data.data.60zec2kc2bs0'),
    textStyle: {
      color: local.theme == 'light' ? '#000000' : '#ffffff',
      fontStyle: 'normal',
      fontWeight: 600,
      fontFamily: 'Arial', 
      fontSize: 23, 
      align: 'center', 
      verticalAlign: 'top', 
      lineHeight: 20,
      backgroundColor: 'rgba(0,0,0,0)', 
      borderColor: '#ccc',
      borderWidth: 1, 
      borderRadius: 5,
    },
  },
    grid:{
      left:20,
      right:20
      // width:'100%',
      // height:'100%'
    },
    legend: {
      left: 15,
      width: '100%',
      height: '100%',
      top: '15%',
      itemGap: 25,
      // type: 'scroll',
      orient: 'vertical',
      icon: 'circle',
      align: 'auto',
      itemWidth: 30,
      z:99,
      textStyle: {
        color: local.theme == 'light' ? '#222222' : '#ffffff',
      },
      // itemStyle: {
      //   shadowBlur: 10, // 尝试增加或减少这个值
      //   // shadowColor: 'rgba(0, 0, 0, 1)', // 增加透明度
      // },
      data: aircraftTypeList.value?.map((item: any) => {
          return {
            name:String( (uavTypes?.[item.uavType]?.name || t('components.aircraftType.60zeao6xb000')) + ' ' + (((item.weight) / sum.value || 0)*100).toFixed(2) + '%'),
            itemStyle: {
              shadowBlur: 10, // 尝试增加或减少这个值
              color: uavTypes?.[item.uavType]?.color, 
              // shadowColor: hexToRgb(uavTypes?.[item.uavType]?.color,0.5)
              shadowColor:uavTypes?.[item.uavType]?.color
             }
          }
        })
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: false },
        dataView: { show: false, readOnly: false },
        restore: { show: false },
        saveAsImage: { show: false }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%'
    },
    series: [
      {
        type: 'pie',
        // radius: [20, 100],
        radius: ['20%', '80%'],
        center: ['68%', '55%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: aircraftTypeList.value?.map((item: any) => {
          return {
            value: item.weight,
            name: String((uavTypes?.[item.uavType]?.name || t('components.aircraftType.60zeao6xb000')) + ' ' + (((item.weight) / sum.value || 0)*100).toFixed(2) + '%'),
            itemStyle: {
              color: uavTypes?.[item.uavType]?.color,
              // shadowBlur: 10,
              // shadowColor: hexToRgb(uavTypes?.[item.uavType]?.color,0.5)
             }
            // name: (uavTypes?.[item.uavType]?.name || t('components.aircraftType.60zeao6xb000')) + ' ' + (((item.weight) / sum.value || 0)*100).toFixed(2) + '%',
            // itemStyle: { color: uavTypes?.[item.uavType]?.color, shadowColor: uavTypes?.[item.uavType]?.color }
          }
        })
      }
    ]
  }
});
</script>

<style scoped lang="less"></style>